<template>
  <div class="goods-management">
    <el-card class="main-card">
      <template #header>
        <div class="card-header">
          <span class="title">商品管理</span>
        </div>
      </template>
      
      <el-table :data="goodsList" style="width: 100%" v-loading="loading">
        <el-table-column prop="goodsId" label="ID" width="80" />
        <el-table-column prop="businessName" label="商家名称" width="120" />
        <el-table-column label="商品图片" width="120">
          <template #default="{ row }">
            <el-image 
              v-if="row.images && row.images.length > 0"
              class="goods-image"
              :src="IMAGE_URL + row.images[0]"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品标题" width="150" />
        <el-table-column prop="text" label="商品描述" show-overflow-tooltip />
        <el-table-column prop="label" label="标签" width="100">
          <template #default="{ row }">
            <el-tag :type="getTagType(row.label)">{{ row.label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="180">
          <template #default="{ row }">
            <div class="price-container">
              <span class="original-price">¥{{ row.originalPrice }}</span>
              <span class="current-price">¥{{ row.currentPrice }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="数据" width="180">
          <template #default="{ row }">
            <div class="data-container">
              <span>销量: {{ row.sellNum }}</span>
              <span>浏览: {{ row.browseNum }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleView(row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="detailVisible"
      title="商品详情"
      width="800px"
      destroy-on-close
    >
      <div v-if="currentGoods" class="goods-detail">
        <div class="detail-header">
          <h2>{{ currentGoods.title }}</h2>
          <el-tag :type="getTagType(currentGoods.label)">{{ currentGoods.label }}</el-tag>
        </div>
        <div class="detail-content">
          <div class="detail-section">
            <h3>基本信息</h3>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="商品ID">{{ currentGoods.goodsId }}</el-descriptions-item>
              <el-descriptions-item label="商家名称">{{ currentGoods.businessName }}</el-descriptions-item>
              <el-descriptions-item label="原价">¥{{ currentGoods.originalPrice }}</el-descriptions-item>
              <el-descriptions-item label="现价">¥{{ currentGoods.currentPrice }}</el-descriptions-item>
              <el-descriptions-item label="销量">{{ currentGoods.sellNum }}</el-descriptions-item>
              <el-descriptions-item label="浏览量">{{ currentGoods.browseNum }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ currentGoods.createTime }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="detail-section">
            <h3>商品描述</h3>
            <p>{{ currentGoods.text }}</p>
          </div>
          <div class="detail-section">
            <h3>商品图片</h3>
            <div class="image-gallery">
              <el-image
                v-for="(img, index) in currentGoods.images"
                :key="index"
                class="detail-image"
                :src="IMAGE_URL + img"
                fit="cover"
              />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getGoodsList } from "@/api/goods";
import { IMAGE_URL } from "@/utils/request";

const loading = ref(false);
const goodsList = ref([]);
const detailVisible = ref(false);
const currentGoods = ref(null);

// 获取商品列表
const getList = async () => {
  loading.value = true;
  try {
    const res = await getGoodsList();
    goodsList.value = res.data;
  } catch (error) {
    console.log(error);
    ElMessage.error("获取商品列表失败");
  } finally {
    loading.value = false;
  }
};

// 查看详情
const handleView = (row) => {
  currentGoods.value = row;
  detailVisible.value = true;
};

// 获取标签类型
const getTagType = (label) => {
  const types = {
    "百亿补贴": "success",
    "618狂欢节": "warning",
    "京东618": "danger",
    "618大促": "info"
  };
  return types[label] || "info";
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.goods-management {
  padding: 20px;
}

.main-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.price-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.original-price {
  text-decoration: line-through;
  color: #909399;
  font-size: 12px;
}

.current-price {
  color: #f56c6c;
  font-weight: 600;
  font-size: 14px;
}

.data-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #606266;
}

.goods-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.goods-image:hover {
  transform: scale(1.05);
}

.goods-detail {
  padding: 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.detail-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
}

.detail-section h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: #303133;
  font-weight: 500;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.detail-image {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

.detail-image:hover {
  transform: scale(1.02);
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  padding: 12px 0;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-button--link) {
  padding: 0 8px;
  font-size: 13px;
}

:deep(.el-descriptions__label) {
  width: 100px;
  font-weight: 500;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid #ebeef5;
}
</style> 